<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>登录网关</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			html,
			body {
				height: 100%;
			}

			body {
				display: flex;
				justify-content: center;
				align-items: center;
				/* 渐变色网站： https://webgradients.com/*/
				background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%);
				/* 渐变换图片 */
			}

			.login {
				width: 400px;
				height: 250px;
				background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
				border-radius: 8px;
			}

			.login h1 {
				height: 38px;
				width: 93%;
				background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
				line-height: 38px;
				font-size: 30px;
				text-align: center;
				border-radius: 5px;
				margin: 15px auto;
			}

			.login-form {
				width: 60%;
				margin: 0 auto;
			}

			.login-form form input {
				width: 220px;
				height: 30px;
				outline: none;
				margin: 10px auto;
				border-radius: 5px;
			}

			.button {
				/* 按钮样式模板网站：http://tools.jb51.net/static/api/button_css/ */
				line-height: 30px;
				height: 30px;
				width: 70px;
				color: #ffffff;
				background-color: #4a8cf7;
				font-size: 16px;
				font-weight: normal;
				font-family: Arial;
				border: 0px solid #dcdcdc;
				-webkit-border-top-left-radius: 3px;
				-moz-border-radius-topleft: 3px;
				border-top-left-radius: 3px;
				-webkit-border-top-right-radius: 3px;
				-moz-border-radius-topright: 3px;
				border-top-right-radius: 3px;
				-webkit-border-bottom-left-radius: 3px;
				-moz-border-radius-bottomleft: 3px;
				border-bottom-left-radius: 3px;
				-webkit-border-bottom-right-radius: 3px;
				-moz-border-radius-bottomright: 3px;
				border-bottom-right-radius: 3px;
				-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
				-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
				box-shadow: inset 0px 0px 0px 0px #ffffff;
				text-align: center;
				display: inline-block;
				text-decoration: none;
			}

			.button:hover {
				background-color: #446bf7;
			}

			.footer {
				position: fixed;
				bottom: 0;
				height: 50px;
				font-size: 12px;
				text-align: center;
				font-family: "宋体";
			}
		</style>
	</head>
	<body>
		<div class="login">
			<h1>表单POST请求示例</h1>
			<div class="login-form">
				<form method="post">
					<input type="text" name="username" id="usr" value="" placeholder="请输入用户名" />
					<input type="password" name="password" id="pwd" value="" placeholder="请输入密码" />
					<input type="submit" class="button" value="登    录" />
				</form>
			</div>

		</div>
		<div class="footer">
			联系电话: 400-706-1880 &nbsp 技术支持QQ: 1075518049<br>
			开发商：华清远见济南研发中心 <a href="http://www.farsight.com.cn" target="_blank"></a>
		</div>

	</body>
</html>
